<template>
	<view class="">
		<view class="content">
			<view style="position: relative;">
			<textarea class="area" @input="descInput" v-model="content" maxlength="100" placeholder="请输入内容"></textarea>
			<span class="xianzhi">{{remnant}}/30</span>
			</view>
			
			
			<textarea class="areas" v-model="intext" placeholder=""></textarea>
			<!-- <view class="title">添加内容</view> -->
			
			<view class="title">上传视频</view>
			<view class="img-wrap" @click="addFilevideo">
				<image v-if="!vidurl" src="../static/images/post-video.png" mode="aspectFill"></image>
				 <video @click="addFilevideo" class="videoplay" v-if="vidurl" id="myVideo" :src="vidurl"
				      enable-danmu danmu-btn controls></video>
					  <text class="restext" v-if="vidurl" @click="addFilevideo">重新上传</text>
			</view>
			<view class="title">上传视频封面</view>
			<view class="img-wrap" @click="addFileimg">
				<image mode="aspectFill" :src="imgurl?imgurl:'../static/images/post-video.png'"></image>
				<text class="restext" v-if="imgurl" @click="addFileimg">重新上传</text>
			</view>
			<!-- <view class="liveTh" style="display: flex;align-items: center;">
				<view class="title">推荐商品</view>
				<view class="list" @click="go_pro">
				
					<view class="nameflex">
						<text class="nameble">已选择{{goods_id.length}}个商品</text>
						<image class="nameimg" src="/static/you.png" mode=""></image>
					</view>
				</view>
			</view> -->
			
			<view class="add-tag">
				<input style="font-size: 30rpx;" type="text" v-model="labervalue" @confirm="pushlaber"  placeholder="#添加标签" maxlength="6"/>
				<text  class="reas" @click="reas">
					清空
				</text>
			</view>
			<view class="tag-wrap">
				<view class="tag-list" :class="{active:item.type}" v-for="(item,index) in labelData" :key="index" @click="changlabel(index,item.type)">#{{item.name}}</view>
				
			</view>
		</view>
		<view class="button-cls">
			<view class="button" @click="release">发布</view>
		</view>
	</view>
</template>

<script>
	const requImg = require("@/common/api_sign/requImg.js")
	export default {
		data() {
			return {
				remnant:0,
				labervalue:"",
				intext:"",
				content:"",
				labelData:[{name:"周六上班",type:false},{name:"奶茶控",type:false}],
				imgname:"",
				imgurl:"",
				vidername:"",
				vidurl:"",
				goods_id:[]//商品id
			}
		},
		onShow() {
			this.get_gooods();
		},
		onReady() {
			if(uni.getStorageSync("labelData")){
				this.labelData=uni.getStorageSync("labelData")
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
			    title:"发布视频"
			});
		},
		methods: {
			// 字数
			descInput() {
				var txtVal = this.content.length;
				if(txtVal>30){
					// this.content.length=30;
					
				}
				this.remnant = txtVal;
			},
			//推荐商品跳转
			get_gooods(){ //获取数据
				// let list=JSON.parse(uni.getStorageSync("voide_list"));
				// if(list){
				// 	let arr=[];
				// 	for(let i=0;i<list.length;i++){
				// 		arr.push(list[i].id);
				// 	}
				// 	this.goods_id=arr;
				// }
			},
			go_pro(){
				// uni.navigateTo({
				// 	url:'/pageA/publish/video'
				// })
			},
			reas(){
				this.labelData=[];
				uni.setStorageSync("labelData","")
			},
			pushlaber(e){
				let data={
					name:this.labervalue,
					type:true
				}
				this.labelData.push(data);
				uni.setStorageSync("labelData",this.labelData)
				this.labervalue="";
			},
			// 上传图片
			addFileimg(){
				let that=this;
			    uni.chooseImage({
				count:1,
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album','camera'], //从相册选择
			    success: (chooseImageRes) => {
					let  data = requImg.request("index.php?act=upload&op=uploadFile&buss_type="+that.$uploadType.uploadtype005);
			        const tempFilePaths = chooseImageRes.tempFilePaths;
					console.log(tempFilePaths)
					let url=that.$apiurl+'index.php?act=upload&op=uploadFile'
			        uni.uploadFile({
			            url: url,
			            filePath: tempFilePaths[0],
			            name: 'file',
			            formData: {
			                key:data.key,
							buss_type:data.buss_type,
			                api_sign:data.api_sign,
			                comefrom:data.comefrom,
			                api_time:data.api_time,
			                // api_member_id:data.api_member_id,
			                // api_member_name:data.api_member_name,
			            },
			            success: (uploadFileRes) => {
							console.log(uploadFileRes.data);
							let file=JSON.parse(uploadFileRes.data);
			                console.log(file);
							if(file.error_code==0){
								uni.showToast({
									title:'上传成功'
								})
								that.imgname=file.datas.file_name;
								that.imgurl=file.datas.file_url;
							}else{
								uni.showToast({
									title:file.datas.error,
									icon:'none'
								})
							}
			            }
			        });
			    }
			});
			},
			// 上传视频
			addFilevideo(){
				let that=this;
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: function (res) {
						const tempFilePaths = res.tempFilePath;
						let  data = requImg.request("index.php?act=upload&op=uploadFile&buss_type=5024005");
					    uni.showLoading({
					    	title:"上传中..."
					    })
						console
						uni.uploadFile({
						    url: that.$apiurl+'index.php?act=upload&op=uploadFile',
						    filePath: tempFilePaths,
						    name: 'file',
						    formData: {
						        key:data.key,
								buss_type:data.buss_type,
						        api_sign:data.api_sign,
						        comefrom:data.comefrom,
						        api_time:data.api_time,
						        // api_member_id:data.api_member_id,
						        // api_member_name:data.api_member_name,
						    },
						    success: (uploadFileRes) => {
								let file=JSON.parse(uploadFileRes.data);
								if(file.error_code==0){
									uni.showToast({
										title:'上传成功'
									})
						
									that.vidername=file.datas.file_name;
									that.vidurl=file.datas.file_url;
									uni.hideLoading()
								}else{
									uni.hideLoading()
									uni.showToast({
										title:file.datas.error,
										icon:'none'
									})
								}
						    }
						});
						
					}
				});
			},
			
			changlabel(index,type){
				this.labelData[index].type=!type;
			},
			addFilvideo() {
				
				
			},
			// 发布
			release() {
		    let that=this;
			if(that.vidername==""){
				uni.showToast({
					title:'视频不能为空'
				})
				return false;
			}
			if(that.imgname==""){
				uni.showToast({
					title:'视频封面不能为空'
				})
				return false;
			}
			let tag=[]
			  for(let i=0;i<that.labelData.length;i++){
				  if(that.labelData[i].type==true){
					  tag.push(that.labelData[i].name)
				  }
			  }
		    let live_goods_num=that.goods_id.splice(",").length;
		    that.$util.request({
			url: '/mobile/index.php?act=video&op=createVideoRecord',
			method: 'post',
			data: {
			   'file_name':that.vidername,
			   'cover':that.imgname,
			   'title':that.intext,
			   'content':that.content,
			   'tag':tag.join(","),
			   goods_ids:1
			}
		}).then(response => {
			if(response.error_code==0){
				uni.showToast({
					title:'上传成功'
				})
				setTimeout(()=>{
					uni.navigateBack({})
				},1000)
				
			}else{
				uni.showToast({
					title:res.code,
					icon:"none"
				})	
			}
		}).catch(error => {
			console.log(error)
		})
				}
				
		}
	}
</script>

<style scoped>
	page{
		background-color: #FFFFFF;
	}
	.content {
		width: 100%;
		border: 1rpx soild #eeeeee;
		padding-bottom: 60rpx;
	}
.videoplay{
width: 220rpx;
		height: 220rpx;
		
}

	.title {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100rpx;
		padding-left: 30rpx;
		font-size: 30rpx;
		color: #666666;
	}
	.restext{
	 font-size: 28upx;
	}
	.say {
		width: 100%;
		height: 23rpx;
		padding-left: 60rpx;
		font-family: PingFang-SC-Medium;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 48rpx;
		letter-spacing: 0rpx;
		color: #999999;
	}

	.img-wrap {
		/* width: 100%; */
		padding:0px 30upx ;
		display: flex;
		justify-content: space-between;
		padding-right: 50px;
	}

	.img-wrap image {
		width: 220rpx;
		height: 220rpx;
	}
	.list{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 80rpx;
		padding-left: 60rpx;
		font-size: 30rpx;
	}
		.nameble{
			font-size: 30upx;
			color: #999999;
		}
		.nameimg{
			width:50upx;
			height:40upx;
		}
		.nameflex{
			display: flex;
			
		}
	.add-tag {
		padding:0px 40rpx;
		padding-top: 20rpx;
		
		font-size: 24rpx;
		color: #999999;
		display: flex;
		justify-content: space-between;
	}
	.reas{
		font-size: 24rpx;
		color: #999999;
	}

	.tag-wrap {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		
		padding-left: 40rpx;
		padding-top: 40rpx;
	}
	.area{
		position: relative;
		width: 90%;
		line-height: 80rpx;
		height:85rpx;
		padding: 0 60rpx;
		font-size: 30rpx;
	}
	.areas{
		width: 100%;
		height:200rpx;
		border-top: 2rpx solid #F2F2F2;
		padding: 20rpx 30rpx;
		font-size: 30rpx;
	}
	.xianzhi {
		position: absolute;
		right:50upx;
		bottom: 25upx;
		color: #666;
	}
	.tag-list {
		opacity: 0.5;
		text-align: center;
		line-height: 30rpx;
		padding: 6rpx;
		border-radius: 20rpx;
		border-width: 1rpx;
		border-style: solid;
		border-color: rgba(153, 153, 159, .3);
		font-size: 24rpx;
		color: #000000;
		margin-right: 16rpx;
		margin-bottom: 20upx;
	}

	.button-cls {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		
		
	}
	.button {
		width: 700rpx;
		height: 80rpx;
		font-family: PingFang-SC-Medium;
		text-align: center;
		line-height: 80rpx;
		border-radius: 40rpx;
		background-color:#E82C58;
		color: #ffffff;
	}
	.active{
		color:#FFFFFF;
		    /* border-width: 1px;
		    border-style: solid; */
		   background-color:#E82C58;
	}
</style>
